<template>
  <div class="checkingList">
    <van-tabs v-model="activeType" sticky @click="changeTab" color="#01847F">
      <van-tab class="tabItem" title="待审核" name="wait">
        <van-list class="" v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <!-- <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card> -->
          <van-checkbox-group v-model="checkedRes" ref="checkboxGroup" @change="singleChecked">
            <div class="listItem bg_w border_r8 margin_b12 flex_r_sb_c" v-for="(item, index) in checkingList" :key="index">
              <div class="listLeft flex_r_fs_c">
                <!-- <div class="leftCheck margin_r20">
                  <van-checkbox :name="item.id" checked-color="#31A2A3"></van-checkbox>
                </div> -->
                <div class="leftContent" @click="getDetails(item.id)">
                  <div class="f_14 tc_1 fw_700 margin_b10 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.name"></p>
                    <p v-if="item.num !== 0" v-text="item.num + '人'"></p>
                  </div>
                  <div class="f_14 tc_1 fw_700 margin_b28 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.username"></p>
                    <a class="tc_1" :href="'tel:' + item.mobile" v-text="item.mobile" @click.stop></a>
                  </div>
                  <div class="f_11 tc_5 margin_b10">
                    <p class="lineH" v-text="'来访需求: ' + item.server"></p>
                  </div>
                  <div class="f_11 tc_5">
                    <p v-text="item.auditTime"></p>
                  </div>
                </div>
              </div>
              <div class="listRight flex_c_sb_c" @click="getDetails(item.id)">
                <span class="checkingTag tc_w f_12 border_r4" :class="{bg_b: item.status === 0, bg_1: item.status === 1, bg_r: item.status === 3, bg_c: item.status === 2, bg_p: item.status === 4}">{{ item.status | auditStatus }}</span>
                <p class="f_11 tc_c" v-text="item.createtime_text"></p>
              </div>
            </div>
          </van-checkbox-group>
          <loading-data v-if="checkingList.length === 0 || loading" :listLength="checkingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
        <!-- <div class="footer bg_w flex_r_sb_c">
          <div class="flex_r_fs_c">
            <van-checkbox checked-color="#31A2A3" v-model="isAllChecked" class="f_14 fw_700 tc_1" @change="allCheck">全选</van-checkbox>
            <p>({{ checkedRes.length }})</p>
          </div>
          <van-button class="footerBtn bg_g tc_w f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="doAudit"> 通过审核 </van-button>
        </div> -->
      </van-tab>
      <van-tab class="tabItem" title="已审核" name="apply">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <!-- <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card> -->
          <van-checkbox-group v-model="checkedRes" ref="checkboxGroup" @change="singleChecked">
            <div class="listItem bg_w border_r8 margin_b12 flex_r_sb_c" v-for="(item, index) in checkingList" :key="index">
              <div class="listLeft flex_r_fs_c">
                <!-- <div class="leftCheck margin_r20">
                  <van-checkbox :name="item.id" checked-color="#31A2A3"></van-checkbox>
                </div> -->
                <div class="leftContent" @click="getDetails(item.id)">
                  <div class="f_14 tc_1 fw_700 margin_b10 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.name"></p>
                    <p v-if="item.num !== 0" v-text="item.num + '人'"></p>
                  </div>
                  <div class="f_14 tc_1 fw_700 margin_b28 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.username"></p>
                    <a class="tc_1" :href="'tel:' + item.mobile" v-text="item.mobile" @click.stop></a>
                  </div>
                  <div class="f_11 tc_5 margin_b10">
                    <p class="lineH" v-text="'来访需求: ' + item.server"></p>
                  </div>
                  <div class="f_11 tc_5">
                    <p v-text="item.auditTime"></p>
                  </div>
                </div>
              </div>
              <div class="listRight flex_c_sb_c" @click="getDetails(item.id)">
                <span class="checkingTag tc_w f_12 border_r4" :class="{bg_b: item.status === 0, bg_1: item.status === 1, bg_r: item.status === 3, bg_c: item.status === 2, bg_p: item.status === 4}">{{ item.status | auditStatus }}</span>
                <p class="f_11 tc_c" v-text="item.createtime_text"></p>
              </div>
            </div>
          </van-checkbox-group>
          <loading-data v-if="checkingList.length === 0 || loading" :listLength="checkingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
      <van-tab class="tabItem" title="驳回" name="cancel">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <!-- <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card> -->
          <van-checkbox-group v-model="checkedRes" ref="checkboxGroup" @change="singleChecked">
            <div class="listItem bg_w border_r8 margin_b12 flex_r_sb_c" v-for="(item, index) in checkingList" :key="index">
              <div class="listLeft flex_r_fs_c">
                <!-- <div class="leftCheck margin_r20">
                  <van-checkbox :name="item.id" checked-color="#31A2A3"></van-checkbox>
                </div> -->
                <div class="leftContent" @click="getDetails(item.id)">
                  <div class="f_14 tc_1 fw_700 margin_b10 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.name"></p>
                    <p v-if="item.num !== 0" v-text="item.num + '人'"></p>
                  </div>
                  <div class="f_14 tc_1 fw_700 margin_b28 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.username"></p>
                    <a class="tc_1" :href="'tel:' + item.mobile" v-text="item.mobile" @click.stop></a>
                  </div>
                  <div class="f_11 tc_5 margin_b10">
                    <p class="lineH" v-text="'来访需求: ' + item.server"></p>
                  </div>
                  <div class="f_11 tc_5">
                    <p v-text="item.auditTime"></p>
                  </div>
                </div>
              </div>
              <div class="listRight flex_c_sb_c" @click="getDetails(item.id)">
                <span class="checkingTag tc_w f_12 border_r4" :class="{bg_b: item.status === 0, bg_1: item.status === 1, bg_r: item.status === 3, bg_c: item.status === 2, bg_p: item.status === 4}">{{ item.status | auditStatus }}</span>
                <p class="f_11 tc_c" v-text="item.createtime_text"></p>
              </div>
            </div>
          </van-checkbox-group>
          <loading-data v-if="checkingList.length === 0 || loading" :listLength="checkingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
      <van-tab class="tabItem" title="全部" name="all">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <!-- <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card> -->
          <van-checkbox-group v-model="checkedRes" ref="checkboxGroup" @change="singleChecked">
            <div class="listItem bg_w border_r8 margin_b12 flex_r_sb_c" v-for="(item, index) in checkingList" :key="index">
              <div class="listLeft flex_r_fs_c">
                <!-- <div class="leftCheck margin_r20">
                  <van-checkbox :name="item.id" checked-color="#31A2A3"></van-checkbox>
                </div> -->
                <div class="leftContent" @click="getDetails(item.id)">
                  <div class="f_14 tc_1 fw_700 margin_b10 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.name"></p>
                    <p v-if="item.num !== 0" v-text="item.num + '人'"></p>
                  </div>
                  <div class="f_14 tc_1 fw_700 margin_b28 flex_r_fs_c">
                    <p class="margin_r12" v-text="item.username"></p>
                    <a class="tc_1" :href="'tel:' + item.mobile" v-text="item.mobile" @click.stop></a>
                  </div>
                  <div class="f_11 tc_5 margin_b10">
                    <p class="lineH" v-text="'来访需求: ' + item.server"></p>
                  </div>
                  <div class="f_11 tc_5">
                    <p v-text="item.auditTime"></p>
                  </div>
                </div>
              </div>
              <div class="listRight flex_c_sb_c" @click="getDetails(item.id)">
                <span class="checkingTag tc_w f_12 border_r4" :class="{bg_b: item.status === 0, bg_1: item.status === 1, bg_r: item.status === 3, bg_c: item.status === 2, bg_p: item.status === 4}">{{ item.status | auditStatus }}</span>
                <p class="f_11 tc_c" v-text="item.createtime_text"></p>
              </div>
            </div>
          </van-checkbox-group>
          <loading-data v-if="checkingList.length === 0 || loading" :listLength="checkingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import bookingCard from '@/components/bookingCard.vue'
import loadingData from '@/components/loadingData.vue'
import audit from '@/api/audit'
export default {
  components: {
    bookingCard,
    loadingData
  },
  data() {
    return {
      activeType: 'wait',
      checkingList: [],
      btnDisable: false,
      loading: false,
      finished: false,
      finishedText: '',
      page: 1,
      lastPage: 0,
      checkedRes: [],
      isAllChecked: false,
      handleCheck: false
    }
  },
  filters: {
    auditStatus(e) {
      switch (e) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已审核'
        }
        case 2: {
          return '已完成'
        }
        case 3: {
          return '驳回'
        }
        case 4: {
          return '超时'
        }
        default: {
          return ''
        }
      }
    }
  },
  methods: {
    changeTab(name, title) {
      this.activeType = name
      this.page = 1
      this.getListData()
    },
    onLoad() {
      this.getListData(true)
    },
    reloadList() {
      this.page = 1
      this.getListData()
    },
    getListData(isNextPage) {
      if (!this.$tools.isNullOrEmpty(isNextPage)) {
        ++this.page
      }
      this.loading = true
      audit.getAuditList({type: this.activeType, page: this.page}).then((res) => {
        this.lastPage = res.data.last_page
        console.log(res)
        res.data.data.forEach((item, index) => {
          item.auditTime = item.date_text + ' ' + item.starttime_text + '-' + item.endtime_text
          item.auditAdd = item.city + item.address
          item.createtime_text = item.createtime_text.split(' ')[1]
        })
        if (!this.$tools.isNullOrEmpty(isNextPage)) {
          this.checkingList = this.checkingList.concat(res.data.data)
        } else {
          this.checkingList = res.data.data
        }

        this.loading = false
        if (res.data.total === 0) {
          this.finishedText = ''
        }
        if (res.data.current_page === res.data.last_page || res.data.last_page === 0) {
          this.finished = true
          this.finishedText = '没有更多了'
        }
      })
    },
    checkDetails(id) {
      this.$router.push({
        path: `/bookingInfo/${id}`
      })
    },
    cancelBooking(id) {
      console.log(id)
    },
    getDetails(id) {
      this.$router.push({
        path: '/checkingDetails/' + id
      })
    },
    singleChecked(e) {
      if (e.length === this.checkingList.length) {
        this.isAllChecked = true
      } else {
        this.isAllChecked = false
      }
    },
    allCheck(isAllChecked) {
      if (isAllChecked) {
        this.$refs.checkboxGroup.toggleAll(true)
        // this.isAllChecked = isAllChecked
      } else if (!isAllChecked && this.checkedRes.length === this.checkingList.length) {
        this.$refs.checkboxGroup.toggleAll(false)
        // this.isAllChecked = isAllChecked
      }
    },
    doAudit() {
      console.log(this.checkedRes)
    }
  },
  mounted() {
    this.getListData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.checkingList {
  .tabItem {
    padding: 0.8rem 1.4rem;
    box-sizing: border-box;
    height: 100%;
    .listItem {
      width: 100%;
      height: 13.2rem;
      padding: 1.6rem;
      box-sizing: border-box;
      .leftContent {
        width: 26rem;
      }
      .listRight {
        height: 100%;
        .checkingTag {
          display: block;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          padding: 0rem 0.6rem;
          box-sizing: border-box;
        }
      }
    }
  }
}
.lineH {
  line-height: 1.6rem;
}
.footer {
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0px -4px 8px rgba(204, 204, 204, 0.15);
  padding: 0rem 1.6rem;
  box-sizing: border-box;
  .footerBtn {
    width: 24.7rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    // margin: 1rem auto;
  }
}
</style>
